<script setup lang="ts" name="Docs">
import {ref, unref} from 'vue'
import {IFrame} from '@/components/IFrame'

import {FloatButton} from 'ant-design-vue'

import {ShareAltOutlined} from '@ant-design/icons-vue'
import {useClipboard} from "@vueuse/core";
import {useMessage} from "@/hooks/web/useMessage";


const {createMessage} = useMessage()

const docs = `https://apifox.com/apidoc/shared-b03387f9-b003-4908-9581-cb5a401f5f96/doc-4095824`

/** 复制 */
async function copy(text: string) {
  const {copy, copied, isSupported} = useClipboard({source: text})
  if (!isSupported) {
    createMessage.error('复制失败')
  } else {
    await copy()
    if (unref(copied))
      createMessage.success('复制成功')
  }
}

const src = ref(docs)

const handleClick = (e) => {
  window.open(docs)
}
</script>

<template>
  <div>
    <FloatButton
      shape="circle"
      type="primary"
      :style="{ top: '100px' }"
      @click="handleClick"
    >
      <template #icon>
        <ShareAltOutlined/>
      </template>
    </FloatButton>

    <IFrame :src="src"/>
  </div>
</template>
